import { CheckOutlined } from '@ant-design/icons';
import cl from 'classnames';
import type { FC } from 'react';

import styles from './index.less';

type TProps = {
  name: string;
  checked?: boolean;
  color?: string;
};

const ChoseBox: FC<TProps> = (props) => {
  const { name, checked = false, color } = props;

  return (
    <div
      className={cl(styles.choseBox, {
        [styles.choseBoxChecked]: checked,
      })}
    >
      <span
        style={{
          ...(color && { color }),
        }}
      >
        {name}
      </span>
      <div className={styles.choseBoxCheckedIconBox}>
        <span className={styles.choseBoxCheckedIcon}>
          <CheckOutlined />
        </span>
      </div>
    </div>
  );
};

export default ChoseBox;
